ant design Table可编辑的单元格改进版 |
您所在的位置：网站首页 › antdesign table › ant design Table可编辑的单元格改进版 |
ant design Table可编辑的单元格改进版
|
antd官方也有给文档，但是超级麻烦，代码量还超级多，改编了一下 如图：
这里table的columns的写法，如下： const columns2 = [ { title: '尺寸名称', dataIndex: 'name', filterDropdown: true, filterIcon: , render: () => , }, { title: '标准尺寸', dataIndex: 'standard', filterDropdown: true, filterIcon: , render:() => , }, { title: '上偏差', dataIndex: 'upper_deviation', filterDropdown: true, filterIcon: , render:() => , }, { title: '下偏差', dataIndex: 'lower_deviation', filterDropdown: true, filterIcon: , render: () => , }, { title: '工序', dataIndex: 'procedure', filterDropdown: true, filterIcon: , render: () => 1 2 }, { title: '操作', dataIndex: 'operation', render: (text, record) => ( this.state.size.length >= 1 ? ( this.handleDelete(record.key)}> 删除 ) : null ), } ];其中 filterDropdown: true, filterIcon: , 这两个是用于给表头添加图标，不需要可以不写 实现可编辑表格最重要的是吧这个表格所有字段都变成可控字段，这样就可以实现对表格数据的提交的基本操作 就拿我这里面的尺寸名称来说，这个字段叫name ，这里的render就要修改成render: (text, record) => this.handleChange({name: e.target.value}, record)}/>, 这里参数text可以理解为 input的初始值，onChange事件是吧这个input变成可控的组件，handleChange这里有两个参数，这里“”name: e.target.value“”必须要这么传，目的是把改组件的值跟name进行绑定。
handleChange 方法 handleChange = (value, record) => { for (var i in value) { record[i] = value[i];//这一句是必须的，不然状态无法更改 this.setState({ size: this.state.size.map((item, key) => item.key == record.key ? {...item, [i]: value[i]} : item) }) } }这里我把这个可编辑表格的值存在state中的size中，通过key进行匹配（这里key代表我这个表格的rowkey，也就是用来区分行数据的一个标识），然后修改指定行的指定数据，通过改变state中的size更新视图，同时吧更改的数据替换掉原来的 这就实现了对表格数据的实时监听，同时表格的所有数据存在了state中的size中，想要获取表格数据直接用this.state.size即可。（这里需要注意的时，如果把表格中的某个字段，比如说name设置成表格的rowkey，就会发生name字段只能输入单个字符就会失去焦点的情况） |
【本文地址】
今日新闻 |
推荐新闻 |